<template>
    <div class="mr-root">
        <public-header>
            <i slot="icon" class="icon-chevron-left" @click="change"></i>
            <p slot="text" class="title">添加留言</p>
        </public-header>
        <div class="answer-content">
            <textarea name="" id="" cols="44" rows="30" placeholder="请输入您的留言" v-model="value"></textarea>
            <button @click.prevent="btnClick">提交</button>
        </div>
    </div>
</template>

<script>
    import PublicHeader from './Header'
    export default{
        data(){
            return{
                value:'',
                topId:this.$route.params.topId
            }
        },
        components:{
            PublicHeader
        },
        created(){
            var accesstoken=localStorage.getItem('accesstoken')
            if(!accesstoken){
                this.$router.push('/login')
            }
        },
        methods:{
            change(){
                this.$router.go(-1)
            },
            btnClick(){
                var accesstoken=localStorage.getItem('accesstoken')
                var data='accesstoken='+accesstoken+'&content='+this.value
                if(accesstoken){
                    this.axios.post('/vueapi/v1/topic/'+this.topId+'/replies',data)
                    .then(data=>{
                        //console.log(data)//返回一个ID值
                        this.$router.go(-1)
                    })
                } 
            }
        }
    }
</script>

<style scoped>
    .icon-chevron-left{
        font-size: 18px;
        margin-left: 20px;
        color: #fff;
    }
    .title{
      display: inline-block; 
  }
  .answer-content{
      padding: 80px 15px 0 15px;
  }
  textarea{
      box-sizing: border-box;
      padding: 10px;
  }
  button{
      margin-top: 30px;
      width: 80px;
      height: 40px;
      background: #0e77e4;
      border: none;
      outline: none;
      color: #fff;
      font-size: 16px;
      border-radius: 10px;
  }
</style>